<!--
 * @Author: C.
 * @Date: 2023-12-15 09:25:10
-->
<template>
  <div class="login-wrapper">
    <view class="banner" />
    <img class="logo" src="/src/static/img/logo.png" />
    <view class="form">
      <TnForm ref="formRef" :model="formData" :rules="formRules">
        <TnFormItem prop="username">
          <TnInput v-model="formData.username">
            <template #prefix>
              <TnIcon name="identity" size="40rpx" /> </template
          ></TnInput>
        </TnFormItem>
        <TnFormItem prop="password">
          <TnInput v-model="formData.password" type="password">
            <template #prefix>
              <TnIcon name="safe-fill" size="40rpx" />
            </template>
          </TnInput>
        </TnFormItem>
      </TnForm>
      <view class="button-wrapper">
        <TnButton
          font-size="36"
          custom-class="popup-calendar-button"
          @click="submitForm"
        >
          登录
        </TnButton>
      </view>
    </view>
  </div>
</template>
<script lang="ts" setup>
// ----------------------------- 第三方引入 -----------------------------
import { reactive, ref } from 'vue'
import TnForm from '@tuniao/tnui-vue3-uniapp/components/form/src/form.vue'
import TnFormItem from '@tuniao/tnui-vue3-uniapp/components/form/src/form-item.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'

import type { FormRules, TnFormInstance } from '@tuniao/tnui-vue3-uniapp'
import { useRouter } from '@/hooks/web/useRouter'
const { reLaunch } = useRouter()
const formRef = ref<TnFormInstance>()

// 表单数据
const formData = reactive({
  username: '',
  password: '',
})

// 规则
const formRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名' },
    {
      pattern: /^[\w-]{4,16}$/,
      message: '请输入4-16位英文、数字、下划线、横线',
    },
  ],
  password: [{ required: true, message: '请输入密码' }],
}

/* 提交表单 */
const submitForm = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      reLaunch({ url: '/pages/index/index' })
      uni.showToast({
        title: '提交成功',
      })
    } else {
      // uni.showToast({
      //   title: '表单校验失败',
      //   icon: 'none',
      // })
    }
  })
}
</script>
<style lang="scss" scoped>
@mixin xcenter() {
  left: 50%;
  transform: translate(-50%, 0);
}
::v-deep {
  .tn-input--input {
    border: none;
    background-color: #f1f1f1;
    border-radius: 999rpx;
  }
}
.login-wrapper {
  position: relative;
  .banner {
    height: 600rpx;
    width: 100%;
    /* background-color: $m-theme-bg; */
    @include linerGradient($direction: 270deg, $c1: #96c0e7, $c2: $m-theme-bg);
  }
  .logo {
    width: 180rpx;
    height: 180rpx;
    background-color: #fff;
    @include box(20rpx);
    position: absolute;
    top: 250rpx;
    @include xcenter;
  }
  .form {
    width: 700rpx;
    height: 600rpx;
    background-color: #fff;
    @include box(20rpx);
    position: absolute;
    top: 500rpx;
    @include xcenter;
    padding: 60rpx 50rpx;
    .button-wrapper {
      @include flexBox();
      padding: 30rpx 10rpx;
      /* width: 100%; */
      .popup-calendar-button {
        margin: 0rpx 30rpx;
        width: 600rpx;
        padding: 20rpx 30rpx !important;
        background-color: $m-theme-bg;
      }
    }
  }
}
</style>
